{{ 'video-section.css' | asset_url | stylesheet_tag }}
{{ 'component-deferred-media.css' | asset_url | stylesheet_tag }}

<div class="video-section{% unless section.settings.full_width %} page-width{% endunless %}">
  <div{% if section.settings.full_width %} class="page-width"{% endif %}>
    <h2 class="title">{{ section.settings.heading }}</h2>
  </div>
  {% if section.settings.video_url.id != blank %}
  <div class="product__media media" style="padding-bottom: 56.25%;">
    <iframe src="https://player.vimeo.com/video/{{ section.settings.video_url.id }}" class="js-vimeo" allow="autoplay; encrypted-media" allowfullscreen title="{{ section.settings.description | escape }}"></iframe>
  </div> 
  {%- endif -%} 


    {% if section.settings.iframe_video != blank %}
    <div class="iframe_video iframe-container">
       {{ section.settings.iframe_video }}
  </div>
  {%- endif -%} 
</div>

{% schema %}
{
  "name": "Video download",
  "tag": "section",
  "class": "spaced-section spaced-section--full-width",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "default": "Video",
      "label": "t:sections.video.settings.heading.label"
    },
    {
      "type": "html",
      "id": "iframe_video",
      "label": "Iframe video"
    },
    {
        "type": "video_url",
        "id": "video_url",
        "accept": [
          "youtube",
          "vimeo"
        ],
        "default": "https:\/\/www.youtube.com\/watch?v=_9VUPq3SxOc",
        "label": "video_url",
        "info": "video_url"
      },
    {
      "type": "text",
      "id": "description",
      "label": "t:sections.video.settings.description.label",
      "info": "t:sections.video.settings.description.info"
    },
    {
      "type": "checkbox",
      "id": "full_width",
      "label": "t:sections.video.settings.full_width.label",
      "default": false
    }
  ],
  "presets": [
    {
      "name": "Video download"
    }
  ]
}
  {% endschema %}
